<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
	<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="full-screen" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="address=no">
	
	<!-- import CSS -->
	<link rel="stylesheet" href="assets/css/style.css">      
	<script src="assets/js/jquery.js"></script>
	
	<!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css">   
    <!-- import Vue before Element -->
	<script src="assets/js/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	
	<script>
		$(function(){
			$('.screen_a').click(function(){
				$('#screen').show();
				$('#screen_bg').show();
				$('html,body').addClass('ovfHiden'); //使网页不可滚动
			})
			$('.cancel').click(function(){
				$('#screen').hide();
				$('#screen_bg').hide();
				$('html,body').removeClass('ovfHiden'); //使网页恢复可滚
			})
		})
	</script>

</head>

<body>	
<!--筛选弹窗-->
<div class="screen" id="screen" style="top:35px;">
	<div class="screen_main">
	    <div class="binding_tit">交易日期：</div>
	    <div class="binding_select" id="time1">
	    	<template>
			  <div class="block">
			    <span class="demonstration"></span>
			    <el-date-picker v-model="value1" type="date" placeholder="开始日期">
			    </el-date-picker>
			  </div>			  
			</template>
	    </div>
	    <div class="binding_select" id="time2">
	    	<template>
			  <div class="block">
			    <span class="demonstration"></span>
			    <el-date-picker v-model="value1" type="date" placeholder="结束日期">
			    </el-date-picker>
			  </div>			  
			</template>
	    </div>
	    <div class="binding_tit">订单状态：</div>
	    <div class="binding_select">
	    	<select>
	    		<option>请选择</option>
	    		<option>订单状态1</option>
	    		<option>订单状态2</option>	    		
	    	</select>
	    </div>
	    <div class="binding_tit">选择商户：</div>
	    <div class="binding_select">
	    	<select>
	    		<option>请选择</option>
	    		<option>商户1</option>
	    		<option>商户2</option>	    		
	    	</select>
	    </div>
	    <div class="binding_tit">订单ID：</div>
	    <div class="binding_select"><input value="请输入"></div>
	    <div class="binding_tit">用户名：</div>
	    <div class="binding_select"><input value="请输入"></div>
	    <div class="binding_btn">	    	
	    	<button class="state_confirm">确认</button>
	    	<button class="cancel">取消</button>
	    </div>
    </div>
</div>
<div id="screen_bg"></div>

<!-- 顶部 -->
<div class="head">
	<div class="head_back"><a href="index.html"><img src="assets/images/arrow.png"></a></div>
    <div class="head_txt">交易流水</div>
</div>

<div class="flow_btn">
	<button class="flow_btn1">今日</button>
	<button class="flow_btn2">本周</button>
	<button class="flow_btn2">本月</button>
	<button class="flow_btn3 screen_a">筛选</button>
</div>

<div class="flow_content">
	<div class="flow_head">
		<div class="flow_head_left">总交易额：5000.00元</div>
		<div class="flow_head_right">总交易笔数：100笔</div>
	</div>
	<div class="flow_list">
		<ul>
			<li>
				<div class="flow_txt">
					<p>订单号：201809123564</p>
					<p>交易用户：林妮妮同学</p>
					<p>商户名称：厦门油茶科技有限公司</p>
					<p>下单时间：2018/09/05 15:52:25</p>
					<p>计费周期：2018/09/05 15:52:25 - 2018/09/05 20:52:25</p>
				</div>
				<div class="flow_sp">
					<span class="flow_sp1">2元</span>
					<span class="flow_sp2">1元/小时</span>
					<span class="flow_sp3">交易成功</span>
				</div>
				<a href="details.html">查看详情</a>
			</li>
			<li>
				<div class="flow_txt">
					<p>订单号：201809123564</p>
					<p>交易用户：林妮妮同学</p>
					<p>商户名称：厦门油茶科技有限公司</p>
					<p>下单时间：2018/09/05 15:52:25</p>
					<p>计费周期：2018/09/05 15:52:25 - 2018/09/05 20:52:25</p>
				</div>
				<div class="flow_sp">
					<span class="flow_sp1">2元</span>
					<span class="flow_sp2">1元/小时</span>
					<span class="flow_sp3">交易成功</span>
				</div>
				<a href="details.html">查看详情</a>
			</li>
			<li>
				<div class="flow_txt">
					<p>订单号：201809123564</p>
					<p>交易用户：林妮妮同学</p>
					<p>商户名称：厦门油茶科技有限公司</p>
					<p>下单时间：2018/09/05 15:52:25</p>
					<p>计费周期：2018/09/05 15:52:25 - 2018/09/05 20:52:25</p>
				</div>
				<div class="flow_sp">
					<span class="flow_sp1">2元</span>
					<span class="flow_sp2">1元/小时</span>
					<span class="flow_sp3">交易成功</span>
				</div>
				<a href="details.html">查看详情</a>
			</li>
		</ul>
	</div>
</div>

<div class="bottom">
	<ul>
		<li>
			<a href="index.html">
				<div class="bottom_img"><img src="assets/images/home_1.png"></div>
				<p>首页</p>
		    </a>
		</li>
		<li>
			<a href="flow.html">
				<div class="bottom_img"><img src="assets/images/flow.png"></div>
				<p class="bottom_active">交易流水</p>
		    </a>
		</li>
		<li>
			<a href="my.html">
				<div class="bottom_img"><img src="assets/images/my_1.png"></div>
				<p>个人中心</p>
		    </a>
		</li>
	</ul>
</div>

</body>
</html>

<script>
	/*时间选择*/
    var Main = {
    data() {
      return {
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      };
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#time1')
new Ctor().$mount('#time2')
</script>
